<template>
	<div class="roundSwiper" :class="{'roundNameP':types==5}" v-if="types!=5">
		<i v-if="types!=5" :class="showIndex==0?'iconfont icon-zuo disabled':'iconfont icon-zuo'" @click.stop="changeRound(-1)"></i>
		<div class="roundBox">
			<transition :name="toLeft ? 'slide-Left':'slide-Right'">
				<div style="width: 50%;">
					<div v-if="types!=5" class="roundName" :key="showIndex">{{roundList[showIndex]}}</div>
				</div>
			</transition>
		</div>
		<i v-if="types!=5" :class="showIndex==roundList.length-1?'iconfont icon-you disabled':'iconfont icon-you'" @click.stop="changeRound(1)"></i>
	</div>
</template>

<script>
	export default {
		props: {
			roundList: Array,
			types: Number
		},
		data() {
			return {
				showIndex: 0,
				oldIndex: 0,
				showOld: false,
				toLeft: false,
				areaSelected: '请选择区',
			}
		},
		computed: {

		},
		watch: {
			roundList: {
				handler: function(newValue, oldValue) {
					console.log(newValue.length)
					this.showIndex = 0;
				}
			}
		},
		methods: {
			changeRound(step) {
				this.oldIndex = this.showIndex
				let index = this.showIndex
				let max_length = this.roundList.length - 1
				if (index == 0 && step == -1) return
				if (index == max_length && step == 1) return
				this.showIndex += step
				this.toLeft = step > 0 ? false : true
				let obj = {
					showIndex: this.showIndex,
					round: this.roundList[this.showIndex]
				}
				this.areaSelected = this.roundList[this.showIndex]
				this.$emit('roundNum', obj)
			},
			changeSelect(){
				let obj = {
					showIndex: parseInt(this.areaSelected)-1,
					round: this.areaSelected
				}
				console.log(obj)
				this.$emit('roundNum', obj)
			}
		}
	}
</script>

<style lang="less" scoped>
	.roundSwiper {
		display: flex;
		margin: 0.2rem 0;
		height: 0.5rem;
		line-height: 0.5rem;
		justify-content: space-around;
	}
	.roundNameP{
		height: 0.8rem;
		line-height: 0.8rem;
	}
	.iconfont {
		font-size: 12px;
	}

	.disabled {
		color: #BBC2D3;
	}

	.roundBox {
		width: 70%;
		display: flex;
		justify-content: center;
		overflow: hidden;

		.roundName {
			width: 3rem;
			font-size: 0.3rem;
			height: 100%;
			background: #C0E6D1;
		}
	}
	
	.slide-Right-enter-active {
		transition: all 1.5s ease;
	}

	.slide-Right-leave-active {
		transition: all .3s ease;
	}

	.slide-Right-enter {
		transform: translateX(100%);
		opacity: 0;
	}

	.slide-Right-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateX(-30%);
		opacity: 0;
	}

	/*left to right*/
	.slide-Left-enter-active {
		transition: all 1.2s ease;
	}

	.slide-Left-leave-active {
		transition: all 0.4s ease;
	}

	.slide-Left-enter {
		transform: translateX(-100%);
		opacity: 0;
	}

	.slide-Left-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		margin-left: 90%;
		transform: translateX(40%);
		opacity: 0;
	}
</style>
